<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jquery.min.js"></script>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
        .f {text-align: left;}
    </style>
</head>
<body>

<table width="90%" class="table">
    <caption>
        <h2>车间能源消耗比例</h2>
    </caption>
    <thead>
    <tr>
        <th>
            名称
        </th>
        <th>
            类型
        </th>
        <th>
            isMobile
        </th>
        <th>
            isWeb
        </th>
        <th>
            地址
        </th>
        <th>
            图标
        </th>
        <th>
            排序
        </th>
        <th>
            操作
        </th>
    </tr>
    </thead>
    <tr>

    </tr>


</table>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $.ajax({
            // headers: {
            //     device: "mobile"
            // },
            url: "/trainExam/rest/menus",
            type: "get",
            dataType: "json",
            data: "device=all",
            success: function (data) {
                if (data !== undefined) {//检测返回的值是否为空
                    if (data.success) {
                        if (data.data !== undefined) {
                            xxx(data.data, 0, -1);
                        }
                    }
                    else {
                        alert(data.message);
                    }
                }
            }
        });

        function xxx(data, fatherId, level) {
            let html = "";
            level ++;
            $.each(data, function () {
               if (this.fatherId === fatherId) {
                   html = "<tr>"
                       + "<td class='f'>" + getBlank(level)+ this.backName + "</td>"
                       + "<td>" + getTypes(this.types) + "</td>"
                       + "<td>" + this.isMobile + "</td>"
                       + "<td>" + this.isWeb + "</td>"
                       + "<td>" + this.backLink + "</td>"
                       + "<td>" + this.smallImage + "</td>"
                       + "<td>" + this.order + "</td>"
                       + "<td><a id='" + this.id + "' class='menu' href='javascript:void(0);'>编辑</a></td>"
                       + "</tr>";
                   $(".table tbody:last").append(html);
                   xxx(data, this.id, level);
               }
            });
        }

        $(document).on('click','.menu',function() {
            window.open("menu.html?id=" + $(this).attr("id"), "_self");
        });

        function getTypes(types) {
           if (types === 2) {
               return "菜单";
           }
           else if (types === 1) {
               return "功能";
           }
           else {
               return "请求";
           }
        }
    });

    function getBlank(level) {
        let s = "";
        for (var i = 0; i < level; i ++) {
            s += "----";
        }
        return s;
    }
</script>
</body>
</html>